// 项目内容区功能
function initProjects() {
    console.log('初始化项目内容功能...');
    
    // 加载项目数据
    loadProjectsData();
}

// 加载项目数据
function loadProjectsData() {
    console.log('尝试加载项目数据...');
    
    fetch('./data/projects.json')
        .then(response => {
            console.log('项目数据响应状态:', response.status);
            if (!response.ok) {
                throw new Error(`HTTP错误 ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('项目数据加载成功:', data);
            renderProjects(data);
        })
        .catch(error => {
            console.error('加载项目数据失败:', error);
            const container = document.getElementById('projects-container');
            container.innerHTML = `<p class="error-message">错误: ${error.message}</p>`;
        });
}

// 渲染项目数据
function renderProjects(data) {
    const container = document.getElementById('projects-container');
    let html = '';

    if (!data || !data.categories || data.categories.length === 0) {
        html = '<p class="empty-message">暂无项目数据</p>';
    } else {
        data.categories.forEach(category => {
            html += `<h2 class="category-title">${category.title}</h2>`;
            html += '<div class="project-list">';
            
            if (!category.items || category.items.length === 0) {
                html += '<p class="empty-message">暂无该分类的项目数据</p>';
            } else {
                category.items.forEach(project => {
                    html += `
                        <a href="${project.url}" target="_blank" class="project-card">
                            <div class="project-icon">
                                <img src="${project.favicon}" alt="${project.name}" width="24" height="24">
                            </div>
                            <div class="project-info">
                                <h3>${project.name}</h3>
                                <p>${project.description}</p>
                            </div>
                        </a>
                    `;
                });
            }
            
            html += '</div>';
        });
    }

    container.innerHTML = html;
    console.log('项目数据渲染完成');
    
    // 为项目卡片添加事件监听
    addProjectCardListeners();
}

// 为项目卡片添加事件监听
function addProjectCardListeners() {
    const projectCards = document.querySelectorAll('.project-card');
    projectCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            // 这里可以添加卡片悬停效果的额外逻辑
        });
        
        card.addEventListener('click', function(e) {
            const projectName = this.querySelector('.project-info h3').textContent;
            console.log('访问项目：', projectName);
        });
    });
}